@extends('web.layouts.app')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('resources/web/css/index.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('resources/web/css/ucenter.css')}}">
@endsection

@section('content')
   <div class="uc-wrap swrap mt20" style="background-color:#fff">
	<div class="add-bank">
		<div class="bank-icon">
			<ul class="bank-icon-list clearfix" data-url="{{ action('UserCenter\UserCenterController@getBankInfo') }}">
				<li class="BOC" title="中国银行">BOC</li>
				<li class="ABC" title="中国农业银行">ABC</li>
				<li class="CCB" title="中国建设银行">CCB</li>
				<li class="ICBC" title="中国工商银行">ICBC</li>
				<li class="CITIC" title="中信银行">CITIC</li>
				<li class="CMBC" title="中国民生银行">CMBC</li>
				<li class="COMM" title="交通银行">COMM</li>
				<li class="PSBC" title="中国邮政储蓄银行">PSBC</li>
				<li class="CMB" title="招商银行">CMB</li>
				<li class="SPDB" title="上海浦东发展银行银行">SPDB</li>
				<li class="HXB" title="华夏银行">HXB</li>
				<li class="CIB" title="兴业银行">CIB</li>
				<li class="SZPAB" title="平安银行">SZPAB</li>
				<li class="CEB" title="中国光大银行">CEB</li>
				<li class="BOS" title="上海银行">BOS</li>
				<li class="GDB" title="广发银行">GDB</li>
				<li class="BCCB" title="北京银行">BCCB</li>
				<li class="CBHB" title="渤海银行">CBHB</li>
				<li class="CZB" title="浙商银行">CZB</li>
				<li class="EGBANK" title="恒丰银行">EGBANK</li>
				<li class="SHRCB" title="上海农商银行">SHRCB</li>
			</ul>
		</div>
		<!-- 银行省份 -->
		<form method="post" action='{{ action("UserCenter\UserCenterController@bindingBankCardAdvance") }}'>	
			<div class="bank-address clearfix">
				<div class="bnank-province L">银行省份：
					<select onchange="chinaChange(this,document.getElementById('city'));" name="province" id="bank_province">
						<option value ="">请选择省份</option>
						<option value ="北京市">北京市 </option>
						<option value ="天津市">天津市 </option>
						<option value ="上海市">上海市 </option>
						<option value ="重庆市">重庆市 </option>
						<option value ="河北省">河北省 </option>
						<option value ="山西省">山西省 </option>
						<option value ="辽宁省">辽宁省 </option>
						<option value ="吉林省">吉林省 </option>
						<option value ="黑龙江省">黑龙江省</option>
						<option value ="江苏省"> 江苏省 </option>
						<option value ="浙江省">浙江省 </option>
						<option value ="安徽省">安徽省 </option>
						<option value ="福建省">福建省 </option>
						<option value ="江西省">江西省 </option>
						<option value ="山东省">山东省 </option>
						<option value ="河南省">河南省 </option>
						<option value ="湖北省">湖北省 </option>
						<option value ="湖南省">湖南省 </option>
						<option value ="广东省">广东省 </option>
						<option value ="海南省">海南省 </option>
						<option value ="四川省">四川省 </option>
						<option value ="贵州省">贵州省 </option>
						<option value ="云南省">云南省 </option>
						<option value ="陕西省">陕西省 </option>
						<option value ="甘肃省">甘肃省 </option>
						<option value ="青海省">青海省 </option>
						<option value ="台湾省">台湾省 </option>
						<option value ="广西壮族自治区">广西壮族自治区</option>
						<option value ="内蒙古自治区"> 内蒙古自治区</option>
						<option value ="西藏自治区"> 西藏自治区</option>
						<option value ="宁夏回族自治区"> 宁夏回族自治区 </option>
						<option value ="新疆维吾尔自治区">新疆维吾尔自治区</option>
						<option value ="香港特别行政区">香港特别行政区</option>
						<option value ="澳门特别行政区">澳门特别行政区</option>
					</select>
				</div>
				<div class="bank-city L">银行城市：
					<select name="city" id="city">
						<option value ="">请选择市区</option>
					</select>
				</div>
			</div>
			<div class="bank-rule">
				<div class="bank-name">已选银行：<span id="choiceBank"></span></div>
					<div class="bank-name L ml190" >描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:<span id='bank_info'></span></div>
				<div class="clearfix rule">
					<!-- <div class="bank-name L ">单次充值最大额：<span>10000</span></div> -->
				</div>
				<!-- div class="clearfix rule">
					<div class="bank-name L ml190">每日累计最大额：<span>10000</span></div>
					<div class="bank-name L">单次充值最小额：<span>0.01</span></div>
				</div> -->
			</div>
			<div class="u-for mt20">
				<div class="bank-number mt10">
					<input type = "hidden" name="bank_code" value="" id="choiceBankCode" />
					<label>开户银行卡号 ：<input type="text" class="tst" placeholder="请填写正确的银行卡号" id="bank_account_no" name="bank_account_no" /></label>
				</div>
				<div class="bank-phone mt10">
					<label>预留手机号码 ：<input placeholder="请填写正确手机号码" type="text" class="tst" id ="phone_no" name="phone_no" /></label>
				</div>
				<div class="phone-code mt10 clearfix ">
					<div class="code L">
						<label>手机验证码 ：<input placeholder="手机验证码" type="text" class="gcode" name="valid_code" id="valid_code" /></label>
					</div>
					<div class="get-code L">
						<input type="button" class="button" id="getSmsCode"  value="短信验证码" data-count ="60" data-url="{{ action('UserCenter\UserCenterController@bindingBankCard') }}"/>
					</div>
				</div>
				<div class="u-for-button mt20">
					<div class="btn">
						<input type="submit" class="subut submit " id="formsubmit" value="确定" data-url='{{ action("UserCenter\UserCenterController@bindingBankCardAdvance") }}' />
						<input type="reset" class="subut reset" value="取消" />
					</div>	
					<br>
					<div class="isTrue mt20">
					<label><input type="checkbox" checked="checked" id="xy" />&nbsp;&nbsp;请同意</label>
					<a href="{{ action('UserCenter\UserCenterController@sinaPaymentProtocol') }}" target="_blank">《新浪支付使用协议》</a>
				</div>
				</div>

			</div>
		<form>
	</div>
</div>
@endsection

@section('scripts')
    <script src="{{ asset('resources/web/js/index.js') }}"></script>
<script type="text/javascript">
var china=new Object();
china['北京市']=new Array('北京市区');
china['上海市']=new Array('上海市区');
china['天津市']=new Array('天津市区');
china['重庆市']=new Array('重庆市区');
china['河北省'] = new Array('石家庄', '唐山市', '邯郸市', '秦皇市岛', '保市定', '张家市口', '承德市', '廊坊市', '沧州市', '衡水市', '邢台市');
china['山西省']=new Array('太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市');
china['辽宁省']=new Array('沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市');
china['吉林省']=new Array('长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边州','长白山管委会');
china['黑龙江省']=new Array('哈尔滨市','齐齐哈尔市','大庆市','佳木斯市','牡丹江市','七台河市','双鸭山市','黑河市','鸡西市','伊春市','绥化市','鹤岗市','加格达奇市');
china['江苏省']=new Array('南京市','苏州市','无锡市','常州市','南通市','扬州市','镇江市','泰州市','盐城市','连云港市','宿迁市','淮安市','徐州市');
china['浙江省']=new Array('杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市');
china['安徽省']=new Array('合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','巢湖市','六安市','亳州市','池州市','宣城市');
china['福建省']=new Array('福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市');
china['江西省']=new Array('南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市');
china['山东省']=new Array('济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市');
china['河南省']=new Array('郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市');
china['湖北省']=new Array('武汉市','黄石市','十堰市','荆州市','宜昌市','襄樊市','鄂州市','荆门市','孝感市','黄冈市','咸宁市','随州市');
china['湖南省']=new Array('长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市');
china['广东省']=new Array('广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市');
china['海南省']=new Array('文昌市','琼海市','万宁市','五指山市','东方市','儋州市');
china['四川省']=new Array('成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市');
china['贵州省']=new Array('贵阳市','六盘水市','遵义市','安顺市');
china['云南省']=new Array('昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市');
china['陕西省']=new Array('西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市');
china['甘肃省']=new Array('兰州市','金昌市','白银市','天水市','嘉峪关市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市');
china['青海省']=new Array('西宁市');
china['台湾省'] = new Array('台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市');
china['广西壮族自治区']=new Array('南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市');
china['内蒙古自治区']=new Array('呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市'); 
china['西藏自治区']=new Array('拉萨市');
china['宁夏回族自治区']=new Array('银川市','石嘴山市','吴忠市','固原市','中卫市');
china['新疆维吾尔自治区']=new Array('乌鲁木齐市','克拉玛依市');
china['香港特别行政区']=new Array('台北市','高雄市','基隆市','台中市','台南市','新竹市','嘉义市');
function chinaChange(province, city) {
var pv, cv;
var i, ii;
pv = province.value;
cv = city.value;
city.length = 1;
if (pv == '0') return;
if (typeof (china[pv]) == 'undefined') return;


for (i = 0; i < china[pv].length; i++) { 
ii = i + 1;

city.options[ii] = new Option();
city.options[ii].text = china[pv][i];
city.options[ii].value = china[pv][i];
}
city.options[0].text = "请选择市区";

};
$(function(){
// 银行选择
 $('.bank-icon-list li').click(function(){
 	var bankName=$(this).attr('title');
 	var bankCode = $(this).attr('class');
 	$(this).addClass('active').siblings('li').removeClass('active');
 	$('#choiceBank').text(bankName);
 	$('#choiceBankCode').val(bankCode);
 	//ajax 从后台获取所选银行信息
 	$url = $('.bank-icon-list').data('url');
 	$.ajax({
 		url:$url,
 		data:{
 			bank_code:bankCode
 		},
 		success:function(result){
 			$('#bank_info').text(' '+result[0]);
 			// alert(result[0]);
 		},
 		error:function(result){
 			$('#bank_info').text('');
 			 for(var i in result.responseJSON){
 			 	swal("系统提示", result.responseJSON[i][0], "error");
                return;
            }
 		}
 	});
 });

 //获取短信校验码
 $('#getSmsCode').click(function(){
 	if(checkSubmit()){
 		var url = $(this).data('url');
 		//发送ajax请求后台发送验证码
 		$.ajax({
 			type:'post',
 			url:url,
 			data:{
 				province:$('#bank_province').find('option:selected').val(),
 				city:$('#city').find('option:selected').val(),
 				bank_code:$('#choiceBankCode').val(),
 				phone_no:$('#phone_no').val(),
 				bank_account_no:$('#bank_account_no').val(),	
 			},
 			success:function(){
 			 	swal("温馨提示", "验证码发送成功,15分钟有效", "success");
 			},
 			error:function(result){
                for(var i in result.responseJSON){
	 			 	swal("发送失败", result.responseJSON[i][0], "error");
                    $('#getSmsCode').attr('disabled',false);
                    $('#getSmsCode').data('count',0);
                    return;
                }
 			}
 		});
 		djs();
 		$(this).attr('disabled','disabled');
 	};
 });
});

//提交表单
$('#formsubmit').click(function(){
	if(checkSubmit()&&checkSubmit2()){
 		var url = $(this).data('url');
		return true;
	}else{
		return false;
	}
});

//验证表单数据 (1)
function checkSubmit(){
	var flag = false;
	var message = "";
	if($('#choiceBank').text() == ''){
		message = "请选择银行";
		return false;
	}else if($('#bank_province').find('option:selected').val() == ''){
		message = "请选择省份";
	}else if($('#city').find('option:selected').val() == ''){
		message = "请选择城市"
	}else if($('#bank_account_no').val() == ''){
		message = "请选择开户银行卡号";
	}else if($('#phone_no').val() == ''){
		message = "请填写手机号码";
	}else{
		flag = true;
		return true;
	}
	swal("系统提示", message, "warning");
	return flag;
}

//验证表单数据 (2)
function checkSubmit2(){
	if($('#valid_code').val()== ''){
		swal("系统提示", "请输入短信验证码", "warning");
		return false;
	}else if($('#xy').attr('checked') != 'checked'){
		swal("系统提示", "必须同意存钱罐服务协议", "warning");
		return false;
	}
	return true;
}
//发送验证码按钮
var $getSmsCode = $('#getSmsCode');

//短信发送1分钟倒计时
 function djs(){
 	//获取按钮
 	$element = $getSmsCode;
 	//获取按钮倒计时时间
 	$time = $element.data('count');
 	// alert(1);
 	if($time > 0){
 		$time --;
 		$element.data('count', $time);
 		$element.val('短信验证码('+$time+')');
 		setTimeout('djs()',1000);
 	}else{
 		$time = 60;
 		$element.data('count', $time);
 		$element.val('短信验证码');
 		$getSmsCode.attr('disabled',false);
 	}
 }
</script>
@endsection